<template>
    <div class="pages roleManagement">

        <div class="pageLevel" v-if="!sub">
            <div class="tableSearch">
                <el-form label-width="100px" class="demo-ruleForm">
                    <el-form-item label="" label-width="15px">
                        <div class="tableSearch tableSearchs">
                            <i class="el-input__icon el-icon-search"></i>
                            <el-form label-width="100px" class="demo-ruleForm">
                                <el-form-item label="" label-width="15px">
                                    <el-input class="input" v-model="findRoleName" size="small" placeholder="角色名称查询" @keyup.enter.native='getTableData(pageSize, 1)'></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-form-item>
                    <el-form-item label="" label-width="15px">
                        <el-button type="primary" @click="getTableData(pageSize, 1)" size="mini">查询</el-button>
                    </el-form-item>
                    <el-form-item label="" label-width="15px" v-if="setRole('新增')">
                        <el-button type="primary" icon="el-icon-plus" size='mini' @click="routerPush('new')">创建角色</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="roleName" label="角色名称" align="center"></el-table-column>
                <el-table-column prop="remark" label="角色描述" align="center"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center" :formatter="trunTime"></el-table-column>
                <el-table-column prop="updateTime" label="修改时间" align="center" :formatter="trunTime"></el-table-column>
                <el-table-column align="center" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="small" @click="routerPush('see',scope.row.roleId)" type="text" class="addDetail">查看</el-button>
                        <el-button size="small" @click="deleteRole(scope.row.roleId)" v-if="setRole('删除') && scope.row.isDistribution == 0" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pageblock">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </div>

        </div>

        <div class="pageLevel" v-else>
            <router-view></router-view>
        </div>

    </div>
</template>

<script>
import util from '@/util'
import { mapState } from "vuex";
import { findRoleList, deleteRole } from '@/api'
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            pageSize: 20,
            currentPage: 1,
            findRoleName: ''
        }
    },
    watch: {
        sub: {
            handler: function(val, oldVal){
                if (oldVal != null && val == false) {
                    this.getTableData(this.pageSize, 1)
                }
            },
            deep: true
        }
    },
    computed: mapState(["sub", "power", "merchantId"]),
    mounted () {
        this.getTableData(this.pageSize, 1)
    },
    methods: {
        deleteRole (id) {
            var self = this
            self.$confirm('确定删除该角色?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                showClose: false
            }).then(() => {
                deleteRole({delRoleIds: id}).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getTableData(this.pageSize, this.currentPage)
                    }
                })
            }).catch(() => {});
        },
        setRole (key) {
            return util.selectTitle(this.power, key)
        },
        getTableData (pageSize, pageNum) {
            findRoleList({
                merchantId: this.merchantId,
                findRoleName: this.findRoleName,
                pageNum: pageNum,
                pageSize: pageSize
            }).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.roleList
                    this.total = res.data.pageTotal
                }
            })
        },
        routerPush (handle, roleId = '') {
            util.routerTo('/operate-management/role-management/role-details',{
                handle: handle,
                roleId: roleId
            })
        },
        // formatter
        getStatus (row, column) {
            return row.status == 0 ? '禁用' : '启用'
        },
        trunTime (row, column, cellValue) {
            return util.foryear(cellValue)+ ' ' +util.fortime(cellValue)
        },
        // 更改每页条数
        handleSizeChange(val) {
            console.log(val)
            this.pageSize = val;
            this.getTableData(val, this.currentPage);
        },
        handleCurrentChange(val) {
            this.getTableData(this.pageSize, val);
        }
    }
}
</script>
<style lang="less" scoped>
.roleManagement{
    position: absolute;
    top: 70px;
    left: 11px;
    right: 11px;
    bottom: 10px;
    // overflow: auto;
    .tableSearchs {
        position: relative;
        margin-top: -10px;
        .el-input__icon {
            position: absolute;
            top: 12px;
            left: 170px;
            z-index: 10;
            width: 25px;
            height: 35px;
        }
    }
}
</style>
